<template>
  <div class="addlinkdetail">
    <el-dialog :title="title" :visible.sync="dialogFormVisible" center>
      <el-form :model="formData" :rules="rules" ref="linklistFrom" label-width="100px">
        <el-form-item label="链接名称">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="APP链接地址">
          <el-input v-model="formData.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="H5链接地址">
          <el-input v-model="formData.h5Url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="打开方式">
          <el-select v-model="formData.openType" placeholder="请选择打开方式">
            <el-option label="内部链接" value="0"></el-option>
            <el-option label="外部链接" value="1"></el-option>
            <el-option label="新窗口" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="链接类型">
          <el-select v-model="formData.dataType" placeholder="请选择类型">
            <el-option label="静态" value="0"></el-option>
            <el-option label="动态" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参数">
          <el-input v-model="formData.requestParam" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="请求方式">
          <el-input v-model="formData.requestType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="扩展属性">
          <el-input v-model="formData.extendAttr" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveLinkList">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { saveLinkList } from "@/api/basisMG";
export default {
  props: {
    aDialogFormVisible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
    },
  },
  data() {
    return {
      title: "",
      dialogFormVisible: false,
      formData: {
        id: "",
        name: "",
        note: "",
        linkTypeId: "",
        url: "",
        openType: "",
        dataType: "",
        requestType: "",
        requestParam: "",
        type: "",
        h5Url: "",
        extendAttr: "",
      },
      rules: {
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
      },
    };
  },
  methods: {
    showEdit(row) {
      if (row.isSet == 0) {
        this.dialogFormVisible = true;
        this.title = "添加链接";
        this.formData.name = "";
        this.formData.url = "";
        this.formData.openType = "";
        this.formData.dataType = "";
        this.formData.requestType = "";
        this.formData.requestParam = "";
        this.formData.linkTypeId = "";
        this.formData.h5Url = "";
        this.formData.extendAttr = "";
        this.formData.id = "";
      } else {
        console.log(row, "555555ssss");
        this.dialogFormVisible = true;
        this.title = "编辑链接";
        this.formData.name = row.name;
        this.formData.url = row.url;
        this.formData.openType = row.openType;
        this.formData.dataType = row.dataType;
        this.formData.requestType = row.requestType;
        this.formData.requestParam = row.requestParam;
        this.formData.h5Url = row.h5Url;
        this.formData.extendAttr = row.extendAttr;
        this.formData.id = row.id;
      }
    },
    saveLinkList() {
      this.$refs["linklistFrom"].validate(async (valid) => {
        if (valid) {
          this.formData.linkTypeId = this.id;
          const data = await saveLinkList(this.formData);
          if (data.code != 200) return this.$message.error(data.message);
          this.$message.success(data.message);
          setTimeout(() => {
            this.dialogFormVisible = false;
            this.emitList();
          }, 500);
        } else {
          this.$message.warning("提交失败, 请检查内容是否填写正确!!!");
          return false;
        }
      });
    },
    emitList(e) {
      this.$emit("editorList", e);
    },
  },
  watch: {
    // 监听 aDialogFormVisible 改变
    aDialogFormVisible(oldVal, newVal) {
      this.dialogFormVisible = this.aDialogFormVisible;
    },
  },
};
</script>
<style lang="scss"></style>
